<style>
.xyd_ui_image_box{
	font-family: "Microsoft YaHei" ! important;
	font-size:12px;
	color:#333;
}
.xyd_ui_image_box .xyd_ui_inline:after{
	content:"\200B";
	display: block;
	height:0;
	clear:both;
}
.xyd_ui_image_box .xyd_ui_inline{
	padding:10px 0px 10px 0px;
	outline:0px solid #f00;
	*zoom :1;
}

.xyd_ui_image_box .xyd_ui_inline .xyd_col{
	float:left;
	margin-left:10px;
	margin-right:10px;
	outline:0px solid #f00;
}

.xyd_ui_image_box .xyd_ui_inline_solid{
	margin:20px 0px 20px 0px;
	border-bottom:1px solid #eee;
}

.xyd_ui_image_box .xyd_ui_image_box .text_left{
	text-align:left;
}
.xyd_ui_image_box .text_right{
	text-align:right;
}
.xyd_ui_image_box .text_center{
	text-align:center;
}


.xyd_ui_image_box .span{
	width:160px;
	font-size:13px;
}
.xyd_ui_image_box .ui_image_view{
	position:relative;
	width:120px;
	height:140px;
	border:1px  solid #ccc;
	border-radius:5px;
	
}
.xyd_ui_image_box .ui_image_view:after{
	display: block;
	width:100%;
	height:100%;
	position:absolute;
	top:0;
	left:0;
	z-index:0;
	content:"\200B";
}
.xyd_ui_image_box .ui_image_view .ui_image_view_back{
	position:absolute;
	width:100%;
	height:100%;
	left:0;
	top:0;
	text-align:center;
}
.xyd_ui_image_box .ui_image_view img{
	width:100%;
	height:100%;
	border-radius:5px;
}


.xyd_ui_image_box .help{
	color:#999;
	padding-top:5px;
	padding-bottom:5px;
	outline:0px solid #f00;
}

.imagesList{
	position:absolute;
	width:100%;
	height:100%;
	left:0;
	top:0;
}
.imagesList img{
	width:100%;
	height:99%;
}
.imagesList .title{
	height:20px;
	line-height:20px;
	text-align:center;
	font-size:12px;
	color:#333;
	outline:0px solid #f00;
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
}

.imagesList .btn-file-del:before{
	display:block;
	width:100%;
	height:30px;
	position:absolute;
	top:0px;
	right:0px;
	z-index:-1;
	background:#000;
	opacity:0.6;
	content : " ";
	filter: alpha(opacity=60);
}
.imagesList .btn-file-del{
	display:none;
	position:absolute;
	top:0px;
	right:0px;
	width:100%;
	z-index:1;
	outline:0px solid #f00;
	text-align:right;
	color:#fff;
	font-size:18px;
	padding-right:4px;
	cursor:pointer;
}
.imagesList .btn-file-del .ace-icon:hover{
	color:#ff0000;
}

.imagesList .red{
	background:#ff0000;
}
.imagesList .green{
	background:#00CC00;
}

.imagesList .ico-file-state-box{
	display:block;
	position: absolute;
	bottom: 0;
	right:0;
	width: 0;
	height: 0;
	content: " ";
	z-index:auto;
	opacity:0.9;
	filter: alpha(opacity=90);
}

.imagesList .uploadFile-state1{
	
}
.imagesList .uploadFile-state2{
	display:block;
	position: absolute;
	left: 0;
	top:0;
	width: 100%;
	height: 100%;
	content: " ";
	z-index:auto;
	opacity:0.6;
	filter: alpha(opacity=60);
	background:#000;
}

.imagesList .uploadFile-state3{
	
}
.imagesList .uploadFile-state4{
	border-bottom: 40px solid  #f00 ;
	border-left: 40px solid transparent ;
	border-top: 40px solid transparent ;
}
.imagesList .uploadFile-state5{
	display:block;
	border-bottom: 40px solid  #1094FA ;
	border-left: 40px solid transparent ;
	border-top: 40px solid transparent ;
}

.imagesList .ico-file-state-bean{
	position: absolute;
	bottom:0;
	right:5px;
	z-index:auto;
	font-size:1em;
	outline:0px solid #f00;
}
.imagesList .ico-file-state-bean-s2{
	position: absolute;
	left:50%;
	top:50%;
	margin-left:-20px;
	margin-top:-30px;
	z-index:auto;
	font-size:3em;
	outline:0px solid #f00;	
}

</style>
<div>
	<div class="xyd_ui_image_box" style="margin:20px auto;">
		<div class="xyd_ui_inline">
			<div class="xyd_col span">
				<div class="text_right span">证件照片</div>
			</div>
			<div class="xyd_col">
				<div class="ui_image_view" id="user_uuid1" style="width:120px;height:140px;">
					<div class="ui_image_view_back" style="line-height:160px;">
						<i class="upload-icon ace-icon fa fa-cloud-upload fa-5x" style="color:#ddd;"></i>
					</div>

				</div>
			</div>
			<div class="xyd_col">
				<div class="help">请您保证上传的图片清晰便于识别</div>
				<div class="help">支持的格式有JPG、PNG、GIF</div>
				<div class="help" id="container1">
					<button class="btn btn-xs btn-primary" id="openFile1">
						<span aria-hidden="true" class="glyphicon glyphicon-plus"></span>选择文件
					</button>
					<span style="color:#f00;" class="openFileState">当前未选择文件</span>
				</div>
			</div>
		</div>
		<div class="xyd_ui_inline_solid"></div>
		<div class="xyd_ui_inline">
			<div class="xyd_col span">
				<div class="text_right span">身份证正面</div>
			</div>
			<div class="xyd_col">
				<div class="ui_image_view" id="user_uuid2" style="width:160px;height:98px;">
					<div class="ui_image_view_back" style="line-height:120px;">
						<i class="upload-icon ace-icon fa fa-cloud-upload fa-5x" style="color:#ddd;"></i>
					</div>
				</div>
			</div>
			<div class="xyd_col">
				<div class="help">请您保证上传的图片清晰便于识别</div>
				<div class="help">支持的格式有JPG、PNG、GIF</div>
				<div class="help" id="container2">
					<button class="btn btn-xs btn-primary" id="openFile2">
						<span aria-hidden="true" class="glyphicon glyphicon-plus"></span>选择文件
					</button>
					<span style="color:#f00;" class="openFileState">当前未选择文件</span>
				</div>
			</div>
		</div>
		<div class="xyd_ui_inline_solid"></div>
		<div class="xyd_ui_inline">
			<div class="xyd_col span">
				<div class="text_right span">身份证背面</div>
			</div>
			<div class="xyd_col">
				<div class="ui_image_view" id="user_uuid3" style="width:160px;height:98px;">
					<div class="ui_image_view_back" style="line-height:120px;">
						<i class="upload-icon ace-icon fa fa-cloud-upload fa-5x" style="color:#ddd;"></i>
					</div>
				</div>
			</div>
			<div class="xyd_col">
				<div class="help">请您保证上传的图片清晰便于识别</div>
				<div class="help">支持的格式有JPG、PNG、GIF</div>
				<div class="help" id="container3">
					<button class="btn btn-xs btn-primary" id="openFile3">
						<span aria-hidden="true" class="glyphicon glyphicon-plus"></span>选择文件
					</button>
					<span style="color:#f00;" class="openFileState">当前未选择文件</span>
				</div>
			</div>
		</div>
	</div>
</div>